<template>
  <div class="forum">
    <!-- 全局弹窗 -->
    <div class="global-alert">
      <AuthBox />
    </div>

    <div class="views-container">
      <!-- 顶部导航栏 -->
      <div class="nav-box">
        <div class="nav">
          <div class="container">
            <div class="container-left">
              <NavLeft />
            </div>
            <div class="container-right">
              <NavRight />
            </div>
          </div>
        </div>
      </div>
      <div class="router">
        <!-- main -->
        <router-view />
      </div>
    </div>
    <BackTop />
  </div>
</template>

<script>
import NavLeft from "../components/NavLeft";
import NavRight from "../components/NavRight";
import AuthBox from "@/components/AuthBox";
export default {
  name: "home",
  components: {
    NavLeft,
    NavRight,
    AuthBox
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang='scss'>
.forum {
  background-color: #f4f5f5;
  min-height: 100vh;
  // overflow: scroll;
  .views-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    .nav-box {
      position: relative;
      height: 4.5rem; //顶部导航栏高度
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1005;
        transition: all 0.1s;
        // transform: translate3d(0, -100%, 0);
        transform: translateZ(0);
        background-color: #fff;
        height: inherit;
        border-bottom: 1px solid #eee;
        .container {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: inherit;
          max-width: 960px;
          margin: 0 auto;
          .container-left {
            height: 100%;
          }
          .container-right {
            height: 100%;
          }
        }
      }
    }
    .router {
      padding-bottom: 4rem;
    }
  }

  .ivu-back-top {
    i {
      padding: 0.5rem !important;
    }
    .ivu-back-top-inner {
      border-radius: 50%;
    }
  }
}

@media screen and (max-width: 980px) {
  .container {
    width: 95%;
  }
}
</style>